// 系统库
import _ from 'lodash';
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import {
	CPage, CContent, CHeader, CFooter, CFloat,
	CAround, CBetween, CCenter, CRow, CWrap, CLine,
	CHand, CItemX, CItemY,
	CText, CLabel, CSvg, CImage,
	CButton, CTouch
} from '../../library/comp';

import {
	Base64, Gen, Time, Zip,
    Session, Storage, 
    Http, Socket,
    Collect,
    Valid, Regex
} from '../../library/func';
import Icon from '../../project/style/icon';

/**
 * 导出Class
 */
export default class Index extends Component {

	constructor(props) {
		super(props);
		this.state = {
			background: '#f60',
			status: 'success'
		}
	}

	componentDidMount() {

		// ------------------------------------------------------- Base64
		console.log('------- Base64 Start')
		let src = 'yuantao';
		let b64 = Base64.encode(src);
		console.log(b64);
		console.log(Base64.decode(b64));
		console.log('------- Base64 End');

		// ------------------------------------------------------- Gen
		console.log('------- Gen Start');
		console.log(Gen.char());
		console.log(Gen.number());
		console.log(Gen.mixed());
		console.log('------- Gen End');

		// ------------------------------------------------------- Time
		console.log('------- Time Start')
		console.log(Time.get10());
		let start = Time.get13();
		let end = start + 12652;
		console.log(start);
		console.log(end);
		console.log(Time.effect(start, end));
		console.log('------- Time End');

		// ------------------------------------------------------- Zip
		console.log('------- Zip Start');
		let data = '[{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"},{"name": "yuantao", "age": 36, "sex": "男", "job": "副总经理", "address": "双胜街"}]';
		let zip = Zip.enzip(data);
		console.log('源串长度：' + data.length);
		console.log('压缩长度：' + zip.length);
		console.log(zip);
		console.log('------- Zip End');

		// ------------------------------------------------------- Session
		console.log('------- Session Start')
		Session.set('text', 'yuantao');
		Session.set('json', {
			name: 'yuantao',
			age: 36
		});
		let text = Session.get('text');
		let json = Session.get('json');
		let empty = Session.get('empty');
		console.log(text);
		console.log(json);
		console.log(empty);  // 不存在此值，则返回null
		console.log('------- Session End');

		// ------------------------------------------------------- Storage
		Storage.set({
			key: 'text',
			value: 'textValue'
		});
		Storage.set({
			key: 'json',
			value: {
				name: 'yuantao',
				age: 35
			}
		});
		Storage.get({
			key: 'text',
			success(res) {
				console.log('------- Storage Text Start')
				console.log(res)
				console.log('------- Storage Text End')
			}
		});
		Storage.get({
			key: 'json',
			success(res) {
				console.log('------- Storage Json Start')
				console.log(res)
				console.log('------- Storage Json End')
			}
		});
		Storage.get({
			key: 'empty',
			success(res) {
				console.log('------- Storage Empty Start')
				console.log(res)
				console.log('------- Storage Empty End')
			}
		});

		// ------------------------------------------------------- Valid
		console.log('------- Valid Start');
		console.log('------- int');
		console.log(Valid.int('0.5', 0, 10));
		console.log(Valid.int(3, 0, 10));
		console.log(Valid.int('5', 2, 10));
		console.log('------- float');
		console.log(Valid.float(0.5, 0, 10, 1, 2));
		console.log(Valid.float(1, 2, 10));
		console.log(Valid.float('0.5', 0, 10, 1, 2));
		console.log(Valid.float('1', 2, 10));
		console.log('------- string');
		console.log(Valid.string('mytest', 5, 10));
		console.log(Valid.string('mytestmytestmytest', 5, 10));
		console.log('------- array');
		console.log(Valid.array('myaray', 1, 10));
		console.log(Valid.array([1, 2, 3], 1, 10));
		console.log('------- object');
		console.log(Valid.object('myobject'));
		console.log(Valid.object([1, 2, 3]));
		console.log(Valid.object({name: 'yuantao'}));
		console.log(Valid.object({name: 'yuantao'}, ['name', 'age']));
		console.log('------- function');
		console.log(Valid.function('myfunction'));
		console.log(Valid.function([1, 2, 3]));
		console.log(Valid.function({name: 'yuantao'}));
		console.log(Valid.function(function(){console.log(123)}));
		console.log('------- regex');
		console.log(Valid.regex('myfunction', Regex.chinese));
		console.log(Valid.regex('myfunction', Regex.charNumber));
		console.log(Valid.regex('中国', Regex.chinese));
		console.log('------- Valid End');
		
		// ------------------------------------------------------- Http
		Http.get({
			url: 'http://127.0.0.1:93020/index.php',
			data: {
				name: 'yuantao'
			},
			success: (data)=> {
				console.log('成功');
				console.log(data);
			},
			error: (res)=> {
				console.log('逻辑错误');
				console.log(res);
			},
			config: {
				debug: true,
				parse: 'hesq',
				header: {
					'content-type': "application/x-www-form-urlencoded;charset=UTF-8",
				},
				indicator: {
					start() {
						console.log('http start');
					},
					end() {
						console.log('http end');
					}
				},
				fail: {
					status(res, obj) {
						console.log('statusError')
					},
					parse(text, obj) {
						console.log('parseError')
					},
					format(text, obj) {
						console.log(text);
						console.log('formatError')
					},
					network(err) {
						console.log('networkERror')
					}
				}
			}
		});
	}
	
	onClick = (id, e)=> {
		console.log('onClick: ' + id)
	}

	render () {
		// const {isError, isLoading, isSuccess} = this.getStatus();
		return (
			<CPage>
				<CContent my='50' bg='#f1f1f1'>
					<CButton type='success' onClick={this.onClick.bind(this, 1)}>测试按钮</CButton>
					<CButton type='error' onClick={this.onClick.bind(this, 2)}>测试按钮</CButton>
					<CButton type='ghost' onClick={this.onClick.bind(this, 3)}>测试按钮</CButton>
					<CTouch type='prod-list' onClick={this.onClick.bind(this, 4)}>
						<CItemY>
							<Text>测试上部</Text>
							<Text>测试下部</Text>
						</CItemY>
					</CTouch>
					{/* <CButtonColor pa='10' bg='#f99' ra='4'>测试按钮</CButtonColor> */}
					<CAround h='50' bg='#e3e3e3'>
						<Text>Test</Text>
						<Text>Test</Text>
						<Text>Test</Text>
						<Text>Test</Text>
					</CAround>
					<CBetween h='50' bg='#c9c9c9'>
						<Text>Left</Text>
						<Text>Center</Text>
						<Text>Right</Text>
					</CBetween>
					<CCenter h='50' bg='#e3e3e3'>
						<Text>Center</Text>
					</CCenter>
					<CRow h='50' bg='#c9c9c9'>
						<Text>RowLeft，</Text>
						<Text>RowCenter，</Text>
						<Text>RowRight</Text>
					</CRow>
					<CLine h='50' bg='#c9c9c9'>
						<Text>RowLeft，</Text>
						<Text>RowCenter，</Text>
						<Text>RowRight</Text>
					</CLine>
					<CHand x='center' y='bottom' bg='#f60' h='60'>
						<Text>Test1</Text>
						<Text>Test2</Text>
						<Text>Test3</Text>
						<Text>Test4</Text>
					</CHand>
					<CItemX bg='#e3e3e3' h='60'>
						<Text>Test1</Text>
						<Text>Test2</Text>
					</CItemX>
					<CItemY bg='#f60'>
						<Text>Test1</Text>
						<Text>Test2</Text>
					</CItemY>
					<CWrap bg='#eee'>
						<Text>Test1</Text>
						<Text>Test2</Text>
						<Text>Test1</Text>
						<Text>Test2</Text>
						<Text>Test1</Text>
						<Text>Test2</Text>
						<Text>Test1</Text>
						<Text>Test2</Text>
						<Text>Test1</Text>
						<Text>Test2</Text>
						<Text>Test1</Text>
						<Text>Test2</Text>
						<Text>Test1</Text>
						<Text>Test2</Text>
						<Text>Test1</Text>
						<Text>Test2</Text>
						<Text>Test1</Text>
						<Text>Test2</Text>
						<Text>Test1</Text>
						<Text>Test2</Text>
						<Text>Test1</Text>
						<Text>Test2</Text>
						<Text>Test1</Text>
						<Text>Test2</Text>
					</CWrap>
					<CLine>
						<CText bg='#06f' color='#fff' size='20' bold>测试Text</CText>
					</CLine>
					<CLine>
						<CLabel pa='20' ra='100' bg='#06f' color='#fff' size='20' bold>测试Text</CLabel>
						<CLabel pa='20' ra='100' bg='#f60' color='#fff' size='20' bold>测试Text</CLabel>
					</CLine>
					<CImage w='50' mode='aspectFit' src='https://images2015.cnblogs.com/blog/717180/201606/717180-20160612173900636-1244801777.png' />
					<CSvg w='30' h='30' icon={Icon.image} />
					<CSvg w='30' h='30' icon={Icon.air} />
					<View><Text>Start</Text></View>
					<View><Text>123434455</Text></View> 
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>123434455</Text></View>
					<View><Text>End</Text></View>
				</CContent>

				<CHeader h='50' bg='#f60'>
					Header
				</CHeader>
				<CFooter h='50' bg='#06f'>
					Footer
				</CFooter>
				<CFloat right='30' bottom='80' bg='#f60' w='50' h='50' ra='25' x='center' y='center'>
					F
				</CFloat>
			</CPage>
		)
	}
}


